<script lang="ts" setup>
import PageCaontainer from '@/arco-components/PageContainer';
import API from '@/services';
import { Message, Modal } from '@arco-design/web-vue';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ModelPanel from './components/ModelPanel/index.vue';
import IndexPanel from './components/IndexPanel/index.vue';
import DimensionPanel from './components/DimensionPanel/index.vue';
import EditRelationDrawer from './components/EditRelationDrawer/index.vue';
import RecordPanel from './components/RecordPanel/index.vue';
import * as RouteNames from '@/router/consts';

const route = useRoute();
const router = useRouter();
const info = ref<defs.DataModelVo>({});
const tabKey = ref('model');
const loading = ref(false);
const showEdit = ref(false);
const recordPanelRef = ref<any>(null);
const editModelName = ref(false);
const editNote = ref(false);

const getModelDetail = async () => {
  // loading.value = true;
  const { data } = await API.dataModel.getGetDetailById({
    id: Number(route.params.id)
  });
  info.value = data || {};
  loading.value = false;
};
onMounted(() => {
  getModelDetail();
});
const updateModel = async () => {
  const res = await API.dataModel.postUpdateModel({
    ...info.value
  });
  if (res.code === 200) {
    return Message.success('更新成功');
  }
};
// 编辑备注
const toEditNote = () => {
  editNote.value = true;
};
// 编辑模型名称
const toEditModelName = () => {
  editModelName.value = true;
};
const onEditEnd = async () => {
  // loading.value = true;
  try {
    await updateModel();
    editNote.value = false;
    editModelName.value = false;
    getModelDetail();
    recordPanelRef.value.fetchDataModelLog();
  } catch (error) {
    loading.value = false;
  }
};
const modelPanelRef = ref<any>(null);
const onEditRelationSuccess = () => {
  if (modelPanelRef.value) {
    modelPanelRef.value.reload();
  }
};
// 点击删除
const deleteModel = (info: any) => {
  Modal.confirm({
    modalClass: 'model-message-confirm',
    title: '是否确定删除该模型？',
    content: '删除后不可恢复',
    simple: false,
    closable: true,
    okText: '确认删除',
    okButtonProps: {
      style: {
        backgroundColor: '#FF1A3B'
      }
    },
    onBeforeOk: (done) => {
      fetchDelete(info.id)
        .then(() => {
          Message.success('删除成功');
          router.push({
            name: RouteNames.ROUTE_INDEXMODELMANAGE,
            params: {
              key: 'index'
            }
          });
        })
        .finally(() => {
          done(true);
        });
    }
  });
};
const fetchDelete = async (id: any) => {
  try {
    await API.dataModel.deleteDeleteById({ id });
    return true;
  } catch (error) {
    throw error;
  }
};
</script>
<template>
  <PageCaontainer show-back>
    <a-spin
      style="display: block; height: 100%; overflow-y: hidden"
      :loading="loading"
    >
      <a-card class="model-info-card">
        <div class="model-info-header">
          <div class="model-info-header-title">
            <!-- <a-typography-paragraph
              editable
              v-model:editText="info.modelName"
              @edit-end="onEditEnd"
            >
              {{ info.modelName }}
            </a-typography-paragraph> -->
            <div class="model-info-header-title-content">
              <div
                class="model-info-header-title-content-text"
                v-if="!editModelName"
              >
                <span>{{ info.modelName }}</span>
                <img
                  src="@/assets/images/edit_img.svg"
                  style="margin-left: 6px; cursor: pointer"
                  @click="toEditModelName"
                />
              </div>
              <a-input
                v-else
                :style="{ width: '400px' }"
                v-model="info.modelName"
                :max-length="40"
                allow-clear
                show-word-limit
                @blur="onEditEnd"
              />
            </div>
          </div>
          <div class="flex-center">
            <div class="model-info-header-desc">
              {{ info.createByName }} 创建于 {{ info.createTime }}
            </div>
            <a-button type="outline" @click="deleteModel(info)">删除</a-button>
          </div>
        </div>
        <div class="model-info-desc">
          <div class="model-info-desc-label">备注：</div>
          <!-- <a-typography-paragraph
            editable
            v-model:editText="info.modelDesc"
            @edit-end="onEditEnd"
          >
            {{ info.modelDesc }}
          </a-typography-paragraph> -->
          <div class="model-info-desc-content">
            <div class="model-info-desc-content-text" v-if="!editNote">
              <span>{{ info.modelDesc }}</span>
              <img
                src="@/assets/images/edit_img.svg"
                style="margin-left: 6px; cursor: pointer"
                @click="toEditNote"
              />
            </div>
            <a-input
              v-else
              :style="{ width: '400px' }"
              v-model="info.modelDesc"
              :max-length="40"
              allow-clear
              show-word-limit
              @blur="onEditEnd"
            />
          </div>
        </div>
        <a-tabs v-model:active-key="tabKey" class="data-manage-tab">
          <a-tab-pane key="model" title="模型结构"> </a-tab-pane>
          <a-tab-pane key="index" title="已开发指标"> </a-tab-pane>
          <a-tab-pane key="dimension" title="包含维度"> </a-tab-pane>
          <a-tab-pane key="record" title="变更记录"> </a-tab-pane>
        </a-tabs>
        <div style="flex: 1; overflow-y: auto">
          <ModelPanel
            ref="modelPanelRef"
            :id="(route.params.id as string)"
            v-if="tabKey === 'model'"
            @editEvent="() => (showEdit = true)"
          />
          <IndexPanel
            v-show="tabKey === 'index'"
            :id="(route.params.id as string)"
          />
          <DimensionPanel
            v-show="tabKey === 'dimension'"
            :id="(route.params.id as string)"
          />
          <RecordPanel
            ref="recordPanelRef"
            v-show="tabKey === 'record'"
            :id="(route.params.id as string)"
          />
        </div>
      </a-card>
    </a-spin>
    <EditRelationDrawer
      v-model:visible="showEdit"
      :id="(route.params.id as string)"
      unmountOnClose
      @success="onEditRelationSuccess"
    />
  </PageCaontainer>
</template>

<style scoped lang="scss">
.model-info {
  &-card {
    height: 100%;
    overflow: auto;
    display: flex;
    width: 100%;
    :deep(.arco-card-body) {
      padding: 0;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  }
  &-header {
    height: 48px;
    display: flex;
    padding: 0 18px;
    align-items: center;
    border-bottom: 1px solid #e8ebf2;
    &-title {
      flex: 1;
      font-size: 16px;
      font-weight: 600;
      color: #33353b;
      :deep(.arco-typography-edit-content) {
        margin-bottom: 0;
      }
      :deep(div.arco-typography) {
        margin-bottom: 0;
      }
      &-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        &-text {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
    &-desc {
      font-size: 12px;
      color: #9b9fab;
      margin-right: 12px;
    }
  }
  &-desc {
    display: flex;
    padding: 12px 18px;
    align-items: center;
    color: #33353b;
    border-bottom: 1px solid #e8ebf2;
    &-label {
      width: 42px;
      font-size: 12px;
      color: #9b9fab;
    }
    :deep(.arco-typography-edit-content) {
      margin-bottom: 0;
    }
    :deep(div.arco-typography) {
      margin-bottom: 0;
    }
    &-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      &-text {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
}
</style>
